<template>
	<div class="mqtt_log_span">
		<table-span
            :current-page="tabelData.current"
            :page-size="tabelData.size"
            :total="tabelData.total"
            :isShowTool="false"
            :isShowPagePlug="false"
            :size-change="handleSizeChange"
            :current-change="handleCurrentChange">
            <template v-slot:searchItem>
                <div class="search_item_fix_width">
                    <el-date-picker
                        v-model="dateInterval"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="default"
                        value-format="YYYY-MM-DD"
                    />
                </div>
                <div class="search_item_span search_item_fix_width">
                    <el-input size="default" v-model="searchCondition.clientId" placeholder="请输入客户端ID" clearable></el-input>
                </div>
                <div class="search_item_span search_item_fix_width">
                    <el-input size="default" v-model="searchCondition.username" placeholder="请输入用户名" clearable></el-input>
                </div>
                <div class="search_item_span search_item_fix_width">
                    <el-select v-model="searchCondition.messageType" placeholder="请选择消息类型"
                        size="default" clearable>
                        <el-option
                            v-for="item in messageTypeList"
                            :key="item.type"
                            :label="item.label"
                            :value="item.type">
                        </el-option>
                    </el-select>
                </div>
                <div class="search_item_span search_item_fix_width">
                    <el-input size="default" v-model="searchCondition.topic" placeholder="请输入主题" clearable></el-input>
                </div>
                <div class="search_item_span search_item_fix_width">
                    <el-input size="default" v-model="searchCondition.message" placeholder="请输入消息内容" clearable></el-input>
                </div>
            	<div class="search_item_span">
                    <el-button icon="Search" size="default" type="primary" @click="searchData">查询</el-button>
                </div>
            </template>
            <template v-slot:searchTable>
            	<el-table :data="tabelData.records" size="default" height="100%" style="width: 100%;">
                    <el-table-column align="center" type="index" width="50">
                    </el-table-column>
                    <el-table-column align="center" prop="clientId" label="客户端ID" width="120">
                    </el-table-column>
                    <el-table-column align="center" prop="username" label="用户名" width="120">
                    </el-table-column>
                    <el-table-column align="center" prop="messageTypeName" label="消息类型" width="120">
                    </el-table-column>
                    <el-table-column align="center" prop="topic" label="主题" min-width="120">
                    </el-table-column>
                    <el-table-column align="center" prop="peerHost" label="客户端IP" width="200">
                    </el-table-column>
                    <el-table-column align="center" prop="createTime" label="创建时间" width="200">
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        align="center"
                        label="操作"
                        width="120">
                        <template #default="scope">
                            <el-button size="small" type="success"
                                @click="showMessage(scope.$index, scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </table-span>
        <el-dialog
            title="消息内容"
            v-model="messageDialogShow"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            @open="showMessageOpen"
            @closed="showMessageClosed"
            width="450px">
                <div id="jsoneditor" style="width: 410px;height: 500px;"></div>
        </el-dialog>
	</div>
</template>
<script>
import TableSpan from '@/components/table-span.vue';
import {tool} from "@/js/tool.js";
import { ElMessage } from 'element-plus'
import JSONEditor from 'jsoneditor';

export default {
	name: "MqttAcl",
	data: function(){
		return {
			btOption: {
				
			},
			tabelData: {
	            total: 0,
	            size: 10,
	            current: 1,
	            records: []
            },
            dateInterval: null,
            messageTypeList: [],
            messageDialogShow: false,

            jsoneditor: null,
            messageData: null,
            
            searchCondition: {
                startDate: "",
                endDate: "",
                clientId: null,
                username: null,
                topic: null,
                messageType: null,
            	page: 1,
            	size: 10
            }
		}
	},
	methods: {
		searchData: function(){
			this.searchCondition.page = this.tabelData.current;
			this.searchCondition.size = this.tabelData.size;
        	getDataList(this);
        },
        handleSizeChange: function(size){
            this.searchCondition.size = size;
            this.searchCondition.page = 1;
            getDataList(this);
        },
        handleCurrentChange: function(current){
            this.searchCondition.page = current;
            getDataList(this);
        },
        showMessage: function(index, row){
            this.messageDialogShow = true;
            this.messageData = row.message;
        },
        showMessageOpen: function(){
            const container = document.getElementById("jsoneditor");
            const options = {
                mode: 'preview',
                mainMenuBar: false
            };
            this.jsoneditor = new JSONEditor(container, options);
            const aceEditor = this.jsoneditor['aceEditor'];

            this.jsoneditor.set(JSON.parse(this.messageData));
        },
        showMessageClosed: function(){
            this.jsoneditor.destroy();
        }
	},
	created: function(){
        let date = this.$route.query.date;
        if(date){
            this.dateInterval = [date, date];
        }else{
            this.dateInterval = [getCurDate(), getCurDate()];
        }

        getMessageTypeList(this);
        
	    const menuId = [this.$route.query.menuId]
	    const obj = this;
	    new tool.getAuthorisedRequest(menuId, this.btOption, function(){
	    	getDataList(obj);
	    });
    },
    components: {
    	TableSpan
    }
}

/**
 * 获取MQTT消息类型列表
 */
function getMessageTypeList(app){
    const url = "/iot/mqtt/log/type/list";
    tool.formJsonRequest(url,{},null,function(data){
        if(data.code === "0000"){
            for(let i=0;i<data.data.length;i++){
                let item = data.data[i];
                for(let val in item){
                    let param = {
                        type: val,
                        label: item[val]
                    }
                    app.messageTypeList.push(param);
                }
            }
        }else{
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    });
}

/**
 * 获取数据信息列表
 */
function getDataList(app){
    if(app.dateInterval == null || app.dateInterval.length != 2){
        ElMessage({
            showClose: true,
            message: '未设置开始结束时间',
            type: 'error'
        });
        return;
    }
	const param = app.searchCondition;
    param.startDate = app.dateInterval[0];
    param.endDate = app.dateInterval[1];

	const url = "/iot/mqtt/log/list";
    tool.formJsonRequest(url,param,null,function(data){
        if(data.code === "0000"){
            app.tabelData.total = data.data.total;
            app.tabelData.size = data.data.size;
            app.tabelData.current = data.data.current;
            app.tabelData.records = data.data.records;
        }else{
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    });
}


/**
 * 获取当前的日期
 */
function getCurDate(){
    const curDate = new Date();
    return curDate.getFullYear() + '-' + ( curDate.getMonth() + 1 ).toString().padStart(2, '0') + '-' + curDate.getDate().toString().padStart(2, '0');
}
</script>
<style>
.mqtt_log_span{
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
}
.search_item_span{
    max-width: 190px;
    height: auto;
    margin-top: 5px;
	margin-left: 10px;
}
.search_item_fix_width{
        width: 370px;
        height: auto;
        margin-top: 5px;
        margin-left: 10px;
    }
</style>
